<template>
  <div class="container">
    <div class="query-form">
      <el-form ref="formRef" :model="queryForm" :rules="rules" inline>
        <el-form-item label="薪资项类型" prop="type">
          <el-select v-model="queryForm.type">
            <el-option label="全部" value="all"/>
            <el-option label="加项" value="plus"/>
            <el-option label="减项" value="minus"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQueryClick">查询</el-button>
          <el-button :icon="Plus" type="primary" @click="handleAddButtonClick">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table v-loading="isLoading" :data="salaryItems" border>
      <el-table-column label="名称" prop="salaryitem_name"/>
      <el-table-column label="说明" prop="detail"/>
      <el-table-column label="类型">
        <template #default="{row}">
          <span>{{ translateSalaryType(row.salary_type) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button link type="primary" @click="handleEditButtonClick(row)">编辑</el-button>
          <el-popconfirm title="是否确定删除？" @confirm="handleDeleteConfirm(row.salaryitem_id)">
            <template #reference>
              <el-button link type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <salary-item-drawer v-model="isAddSalaryItemDrawerShow" @success="handleDrawerSuccess"/>
  <salary-item-drawer
      v-model="isEditSalaryItemDrawerShow"
      :salary-item-to-edit="salaryItemToEdit"
      @success="handleDrawerSuccess"
  />
</template>
<script lang="ts" setup>
import {deleteSalaryItemById, getSalaryItems} from "@/api/salaryItem";
import {ref} from "vue";
import SalaryItemResponse from "@/api/types/salary/SalaryItemResponse";
import {Plus} from "@element-plus/icons-vue"
import SalaryItemDrawer from "@/components/drawer/SalaryItemDrawer.vue";
import SalaryItemRequest from "@/api/types/salary/SalaryItemRequest";
import {ElForm, ElMessage, FormRules} from "element-plus";
import {isAxiosError} from "axios";
import {translateSalaryType} from "../../../api/types/salaryItem";

const salaryItems = ref<SalaryItemResponse[]>()
const isLoading = ref(false)
const isAddSalaryItemDrawerShow = ref(false)
const isEditSalaryItemDrawerShow = ref(false)
const salaryItemToEdit = ref<SalaryItemRequest>()

const queryForm = ref<{ type: "all" | "plus" | "minus" }>({type: "all"})
const formRef = ref<InstanceType<typeof ElForm>>()
const rules: FormRules = {
  type: [
    {
      required: true,
      message: "请选择薪资项类型",
      trigger: "change"
    }
  ]
}

async function getData() {
  if (isLoading.value == false) {
    isLoading.value = true;
  }
  const {data} = await getSalaryItems()
  if (data?.info_list !== undefined) {
    switch (queryForm.value.type) {
      case "all": {
        salaryItems.value = data.info_list
        break
      }
      case "plus": {
        salaryItems.value = data.info_list.filter(salaryItem => salaryItem.salary_type === 1)
        break
      }
      case "minus": {
        salaryItems.value = data.info_list.filter(salaryItem => salaryItem.salary_type === 0)
      }
    }
    isLoading.value = false
  }
}

getData()

function handleAddButtonClick() {
  isAddSalaryItemDrawerShow.value = true
}

async function handleDeleteConfirm(id: number) {
  try {
    const {code, msg} = await deleteSalaryItemById(id)
    if (code == "200") {
      ElMessage.success(msg);
      await getData()
    } else {
      ElMessage.error(msg);
    }
  } catch (error) {
    if (isAxiosError(error) && error.response?.data.message != undefined) {
      ElMessage.error(error.response?.data.message);
    }
  }
}

async function handleDrawerSuccess() {
  await getData()
}

function handleEditButtonClick(salaryItemResponse: SalaryItemResponse) {
  salaryItemToEdit.value = {
    salaryitem_id: salaryItemResponse.salaryitem_id,
    salaryitem_name: salaryItemResponse.salaryitem_name,
    salary_type: salaryItemResponse.salary_type,
    detail: salaryItemResponse.detail
  }
  isEditSalaryItemDrawerShow.value = true
}

async function handleQueryClick() {
  await getData()
}
</script>
<style lang="scss" scoped>
.container {
  background-color: white;
  padding: 20px;

  .query-form {
    .el-select {
      --el-select-width: 240px;
    }
  }
}
</style>
